<template>
  <el-dialog
    title="课程关联"
    :visible.sync="dialogVisible"
    append-to-body
    width="50%">
    <el-form :inline="true">
    <el-form-item>
      <el-input placeholder="请选择分类" :value="current.name" type="text" readonly>
        <template slot="prepend">
          <el-button class="el-icon-edit" @click="checkSort" type="text">选择分类</el-button>
        </template>
        <template slot="suffix">
          <el-button
            v-show="current.name"
            class="el-icon-delete-solid"
            @click="delectCate"
            type="text"
          >清空</el-button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button @click="getDataList()">查询</el-button>
    </el-form-item>
  </el-form>
    <el-table
      :data="dataList"
      row-key="id"
      border
      ref='multipleTable'
      size="mini"
      style="width: 100%;"
    >
      <el-table-column align="center">
        <template slot="header" slot-scope="scope">
          <el-button type="text" :t="scope" @click="checkAll()">全选</el-button>
        </template>
        <template slot-scope="scope">
          <el-button type="text" v-if="!scope.row.isChecked" @click="checkOne(scope.row)">选择</el-button>
          <el-button type="text" disabled v-else>已选择</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="title" header-align="center" align="center" label="课程名称"></el-table-column>
      <el-table-column prop="cateName" label="课程分类" header-align="center" align="center"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="dataForm.page"
      :page-sizes="[10, 20, 50]"
      :page-size="dataForm.limit"
      :total="dataForm.totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="onsubmit" :loading="loading">确定</el-button>
    </div>

    <el-dialog
      title="分类管理"
      :visible.sync="dialogFormVisible"
      :show-close="false"
      append-to-body
      width="40%"
    >
      <learn-cate
      ref="learnCate"
      v-if="learnCate"
      type="试卷分类"
      :setCurrent="setCurrent"
      :current="current"
    />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>

  </el-dialog>
</template>

<script>
  import learnCate from '../../learn/learncate'
  export default {
    name: 'course-plugin',
    data() {
      return {
        dataList: [],
        courseList: [],
        dialogFormVisible: false,
        learnCate: false,
        dialogVisible: false,
        loading: false,
        userId: '',
        current: {},
        cateId: '',
        courseId: '',
        dataForm: {
          page: 1,
          limit: 10,
          totalPage: 0
        }
      }
    },
    components: { learnCate },
    props: ['setCourseList'],
    methods: {
      // 课程分类
      checkSort() {
        this.dialogFormVisible = true
        this.learnCate = true
        this.$nextTick(() => {
          this.$refs.learnCate.init()
        })
      },
      setCurrent(data) {
        if (data.id) this.current = data
        this.cateId = data.id
      },
      open(userId, courseList, id) {
        this.cateId = ''
        this.current.name = ''
        this.courseId = id
        this.courseList = courseList || []
        // if (courseIds) {
        //   courseIds.forEach(item => {
        //     if (this.courseIds.findIndex(x => x.courseId !== item.courseId)) {
        //       this.$set(item, 'isChecked', true)
        //       this.courseList.push(item)
        //     } else {
        //       let index = this.courseIds.findIndex(x => x.id)
        //       index > -1 && this.courseIds.splice(index, 1)
        //     }
        //   })
        // }
        this.userId = userId
        this.loading = false
        this.dialogVisible = true
        this.dataForm = {
          page: 1,
          limit: 10,
          totalPage: 0
        }
        this.getDataList()
      },
      delectCate() {
        this.current = { name: '', id: '' }
        this.cateId = ''
        this.getDataList()
      },
      async getDataList() {
        let res = await this.$http.post('/train-admin/course/list', {
          'page': this.dataForm.page,
          'limit': this.dataForm.limit,
          'userId': this.userId,
          'cateId': this.cateId,
          'classStatus': 1,
          'orderType': 0
        })

        if (res && res.code === 200) {
          if (this.courseList) {
            res.data.list.forEach(item => {
              let isChecked = this.courseList.findIndex(x => x.courseId === item.courseId) > -1
              item.isChecked = isChecked
            })
          }
          this.dataList = res.data.list
          this.dataForm.totalPage = res.data.totalCount
          this.dataForm.pageSize = res.data.pageSize
          this.dataForm.currPage = res.data.currPage
        }
      },

      // 每页数
      sizeChangeHandle(val) {
        this.dataForm.limit = val
        this.dataForm.page = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.dataForm.page = val
        this.getDataList()
      },
      checkAll() {
        this.dataList.forEach(item => {
          if (!item.isChecked) {
            this.$set(item, 'isChecked', true)
            this.courseList.push(item)
          }
        })
      },
      checkOne(user) {
        this.$set(user, 'isChecked', true)
        this.courseList.push(user)
      },
      onsubmit() {
        if (this.courseId) {
          this.addLocally()
        } else {
          this.loading = true
          this.dialogVisible = false
          this.setCourseList(this.courseList)
        }
      },
      close() {
        this.dialogVisible = false
      },
      async addLocally() {
        let res = await this.$http.post('/usercenter-admin/breakrule/addCourse', {
          'userId': this.userId,
          'breakRuleId': this.courseId,
          'courseIds': this.courseList.map(x => x.courseId).join(',')
        })

        if (res.code === 200) {
          this.loading = true
          this.dialogVisible = false
          this.setCourseList(this.courseList)
        }
      }
    }
  }
</script>

<style scoped>

</style>
